import { Component } from '@tarojs/taro'
import { ScrollView, View } from "@tarojs/components"
import PropTypes from 'prop-types'
import './index.scss'
import GHeader from "../Header";
import { HeaderType } from "../../constants"
import Constant from '../../utils/constant'
import { formatStyle } from "../../utils";

/**
 * 基本全局根节点组件
 * @author zeng
 * @date   2020/3/26 11:31
 */
export default class GRootPage extends Component {

  static options = {
    addGlobalClass: true
  }

  static propTypes = {
    rootStyle: PropTypes.object, // 根节点样式
    title: PropTypes.string, // 标题
    headerType: PropTypes.oneOf([HeaderType.NORMAL, HeaderType.SINGLE, HeaderType.PAGE]), // 标题类型
    onScrollToLower: PropTypes.func, // 拉下触底
    scrollY: PropTypes.bool, // 是否 y 轴滚动
    scrollX: PropTypes.bool, // 是否 x 轴滚动
    scrollView: PropTypes.bool, // 是否开启 scrollView
  }

  static defaultProps = {
    rootStyle: {},
    scrollY: true,
    onScrollToLower: () => {
    },
    scrollView: true
  }

  state = {}

  render () {
    const { rootStyle, title, headerType, scrollY, scrollX, onScrollToLower, scrollView } = this.props
    return (
      <View className='root-page flex-col' style={{ paddingTop: Constant.handlerPaddingTop, ...formatStyle(rootStyle) }}>
        {
          title && <GHeader title={title} type={headerType}/>
        }
        {
          scrollView ? (
            <ScrollView
              className={scrollY ? 'scroll-y' : 'scroll-x'}
              scrollY={scrollY}
              scrollX={scrollX}
              onScrollToLower={onScrollToLower}
            >
              {this.props.children}
            </ScrollView>
          ) : (
            this.props.children
          )
        }
      </View>
    )
  }
}
